import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-ng-if',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './my-ng-if.component.html',
  styleUrl: './my-ng-if.component.css',
})
export class MyNgIfComponent {
  isNgIf = true;
  isNgIf2 = true;
  hasMore = true;
  age = 11;

  colorN = 0;
  myStyleObj = {
    backGroundColor: '#126',
    color: '#252',
    'border-color': '#fff',
  };

  cssObj = {
    btn: true,
    'btn-success': true,
    'btn-danger': false,
  };

  doAction() {
    this.myStyleObj['border-color'] = '#555';
    this.myStyleObj.color = '#fff';
  }
  cssBtn() {
    this.colorN = this.colorN + 1;
    this.cssObj['btn-success'] = this.colorN / 2 === 0;
    this.cssObj['btn-danger'] = this.colorN / 2 === 1;
  }
  doClick() {
    if (this.hasMore == true) {
      this.hasMore = false;
      console.log('loadingm2 more');
      return;
    }
    this.hasMore = true;
    console.log('loadingm more');
  }
}
